import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import { withFormik, Form, Field, ErrorMessage } from "formik"

import * as Yup from 'yup'

import API from '@/utils/api'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

//使用受控组件方式获取表单元素
class Login extends Component {
  render() {
    // const {username,password}=this.state
    //通过props获取高阶组件传递过来的属性
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field type="text" className={styles.input} name="username" placeholder="请输入账号"></Field>
            </div>
            <ErrorMessage className={styles.error} name="username" component="div"></ErrorMessage>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formItem}>
              <Field type="password" className={styles.input} name="password" placeholder="请输入密码"></Field>
            </div>
            <ErrorMessage className={styles.error} name="password" component="div"></ErrorMessage>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* <div className={styles.error}>账号为必填项</div> */}
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

//使用withFormik高阶组件包装Login组件,为Login提供一些属性和方法
Login=withFormik({ 
  //提供状态：
  mapPropsToValues: () => ({ username: '', password: '' }),

  //添加表单校验规则
  validationSchema: Yup.object().shape({
    username: Yup.string().required('账号为必填项').matches(REG_UNAME,'长度为5到8位，只能出现数字、字母、下划线'),
    password: Yup.string().required('密码为必填项').matches(REG_PWD,'长度为5到12位，只能出现数字、字母、下划线'),
  }),

  //表单的提交事件
  handleSubmit: async (values,{props})=>{
      const {username,password}=values
      const res = await API.post('/user/login',{username,password})
      const {body,description,status } = res.data 
      if(status!==200) return Toast.info(description)
      window.localStorage.setItem('hkzf_token',body.token)
      console.log(props);
      if(!props.location.state){
        props.history.go(-1)
      }else{
        //push home=>login=>map
        //replace home=>map
        props.history.replace(props.location.state.from.pathname)
      }
      // props.history.push('/home/profile')
  }
})(Login)

//注意:此处返回的是高阶组件包装后的组件

export default Login
